<template>
	<view class="h-full pos-r">
		<use-navbar ref="navbar" title="本地仓"></use-navbar>

		<view class="dflex-c padding-lr bg-base">
			<view class="dflex margin-tb-xl">
				<use-ring class="margin-right-xl" ref="ring">
					<view class="ft-white tac">{{data.inventory|| 0}}</view>
					<view class="fs-xxs">当前库存</view>
				</use-ring>
			</view>
		</view>
		<view class="bg-main data-area padding-lr-sm padding-top">
			<view class="dflex-a w-full padding-top-xl">
				<view class="stats dflex-c dflex-flow-c">
					<text class="fs-xl">{{ data.local_th_total || 0 }}</text>
					<view class="ft-main fs-xs">
						累计提货
					</view>

					<view class="vertical-line"></view>
				</view>
				<view class="stats dflex-c dflex-flow-c">
					<text class="fs-xl">{{ data.local_xh_total || 0 }}</text>
					<view class="ft-main fs-xs">
						累计销售
					</view>

					<view class="vertical-line"></view>
				</view>
			</view>
			<view class="margin-tb-xl padding-top-sm padding-lr">
				<view class="tac dflex-a w-full">
					<view class="border-radius nav" @click="toStock">
						<view class="dflex-c dflex-flow-c">
							<view class="border-radius item" style="background: #ffbc49;">
								<text class="iconfont iconmingxi"></text>
							</view>
							<view class="">
								<view class="fs-30 fwbd">
									库存详细
								</view>
								<view class="ft-dark fs-xxs">
									库存明细
								</view>
							</view>
						</view>
					</view>
					<view class="border-radius nav" @click="toPickupLogs">
						<view class="dflex-c dflex-flow-c">
							<view class="border-radius item" style="background: #6f96f1;">
								<text class="iconfont iconfenxiaodingdan-01"></text>
							</view>
							<view class="">
								<view class="fs-30 fwbd">
									提货记录
								</view>
								<view class="ft-dark fs-xxs">
									提货记录明细
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="margin-tb-xl  padding-lr">
				<view class="tac padding-lr-sm w-full">
					<view class="border-radius nav" @click="toSales">
						<view class="dflex-c dflex-flow-c">
							<view class="border-radius item" style="background: #ffbc49;">
								<text class="iconfont icondaishenyongjin-01"></text>
							</view>
							<view class="">
								<view class="fs-30 fwbd">
									销售记录
								</view>
								<view class="ft-dark fs-xxs">
									销售记录明细
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';

	export default {
		computed: {
			...mapState(['member'])
		},
		data() {
			return {
				data: {
					inventory: 0
				},
			};
		},
		onLoad: function() {
			this.loadData();
		},
		methods: {
			loadData() {
				this.$func.wmzmall.call('localStock/getNum').then(res => {
					if (res.code == 200) {
						this.data = res.datas.data
					}
				});
			}, 
			toStock() {
				uni.navigateTo({
					url: '/sub-user/pages/localWarehouse/stock'
				})
			},
			toPickupLogs() {
				uni.navigateTo({
					url: '/sub-user/pages/localWarehouse/pickupLogs'
				})
			},
			toSales() {
				uni.navigateTo({
					url: '/sub-user/pages/localWarehouse/sales'
				})
			},
		},
	}
</script>

<style lang="scss">
	page {
		width: 100%;
		height: 100%;
		background-color: #ff6a6c;
	}

	.data-area {
		border-top-left-radius: 80rpx;
		border-top-right-radius: 80rpx;
		overflow: hidden;
		top: 300rpx;
		height: calc(100% - 298rpx);
		overflow-y: auto;

		.stats {
			width: 33.33%;
			position: relative;
		}

		.nav {
			width: 44%;
			box-shadow: 0 2rpx 30rpx 5rpx #f5f5f5;
			padding: 50rpx 0 30rpx;
		}

		.item {
			width: 100rpx;
			height: 100rpx;
			line-height: 100rpx;
			margin-bottom: 20rpx;

			.iconfont {
				color: #fff;
				font-size: 50rpx;
			}
		}
	}

	.cashout {
		padding: 15rpx 60rpx;
		background-color: #fff;
		border-radius: 15rpx;
	}

	.cashout-area {
		width: 80vw;
		padding: 80rpx;

		.field {
			padding: 20rpx;
			background-color: #f5f5f5;

			input {
				height: 56rpx;
				line-height: 56rpx;
			}
		}
	}
</style>